<template>
	<view >
		<view class="content row" v-if="isNormal">
			<image src="../../static/img/down_app_bg.png" mode="aspectFill" class="normal_img"></image>
			<div style="position: relative;z-index: 3; min-height: 400upx;" >
				<div class="title" v-if="isDownLoading">正在为你下载APP</div>
				<div v-if="isDownLoading">
					<span class="info">下载失败？</span>
					<a class="retry" href="http://file.91fld.com/prod/app/andriod/com.hanle.qdcj.apk" @click="downLoadApp">点击重试</a>
				</div>
				
				<a href="http://file.91fld.com/prod/app/andriod/com.hanle.qdcj.apk" class='download_btn' @click="downLoadApp" v-if="!isDownLoading">点击下载</a>
			</div>
		</view>
		
		<view class="content row" v-if="isWeiXin">
			
			<image src="../../static/img/down_app_bg.png" mode="aspectFill" class="bg"></image>
			<image src="../../static/img/info_app.png" mode="aspectFill" class="info_img"></image>
			<div>
				<div class="title">点击右上角…</div>
				<div>
					<span class="info">选择</span>
					<span class="retry">在浏览器打开</span>
				</div>
			</div>
		</view>
		
	</view>
</template>

<script>
	
	import {isWeiXin} from "@/utils/index.js"
	import { BASE_IMAGE_URL,about_us } from '@/utils/api'
	export default {
		data() {
			return {
				downLoadUrl: '',
				downloadTask: {},
				isNormal: false,
				isWeiXin: false,
				isDownLoading: false
			}
		},
		methods: {
			retryDownLoad(){
				if(this.downloadTask){
					this.downloadTask.abort();
				}
				// this.downLoadApp();
			},
			downLoadApp(){
				this.isDownLoading = true;
				// this.downloadTask = uni.downloadFile({
				//     url: this.downLoadUrl, //仅为示例，并非真实的资源
				//     success: (res) => {
				//         if (res.statusCode === 200) {
				//             console.log('下载成功');
				// 			uni.showToast({
				// 				title: "下载成功",
				// 				icon:'none',
				// 				duration:2000
				// 			})
				//         }
				//     },
				// 	fail: (res) => {
				// 		uni.showToast({
				// 			title: "fail"+JSON.stringify(res),
				// 			icon:'none',
				// 			duration:2000
				// 		})
				// 	}
				// });
				// 
				// this.downloadTask.onProgressUpdate((res) => {
				//     console.log('下载进度' + res.progress);
				//     console.log('已经下载的数据长度' + res.totalBytesWritten);
				//     console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				// 	uni.showToast({
				// 		title: res.progress+"",
				// 		icon: 'none',
				// 		duration:1000
				// 	})
				//     // 测试条件，取消下载任务。
				//     if (res.progress > 50) {
				//         // downloadTask.abort();
				//     }
				// });
				
			},
		},
		onLoad(opt) {
			if(isWeiXin()){
				this.isWeiXin = true;
				this.isNormal = false;
			}else{
				this.isWeiXin = false;
				this.isNormal = true;
				this.downLoadUrl = "http://file.91fld.com/prod/app/andriod/com.hanle.qdcj.apk";
				// this.downLoadApp();
			}
			
		}
	}
</script>

<style>
	page{background: #FFFFFF;}
	.content{width: 100%; height: 100%; background: #FFF; overflow: hidden; flex: 1;position: relative;}
	.content .normal_img{width: 100%; height: 100%; position: fixed;top: 0; left: 0; z-index: 1;}
	div{text-align: center; width: 100%;}
	.title{color: #1A1A1A; font-size: 44upx; margin-top: 200upx;}
	.info{color: #666666; font-size: 30upx;}
	.retry{color: #4A65F7; font-size: 30upx;}
	
	
	.content .bg{width: 100%; height: 100%; position: fixed;top: 0; left: 0; z-index: 1;}
	.content .info_img{width: 109upx; height: 158upx; position: absolute;top: 30upx; right: 80upx;}
	
	a{ text-decoration:none} 
	
	.download_btn{background: #FFCA0A; color: #FFFFFF; border-radius: 10upx; padding: 15upx 30upx; font-size: 30upx; margin-top: 200upx; display: inline-block;}
</style>
